<template>
	<view class="content1">
		<view class="page-head">
			<uni-icons class="gap-top" type="arrow-left" color="white" size="30" @click="goBack"></uni-icons>
			<text class="white-font gap-top">充值中心</text>
		</view>
		<view class="package-box" style="padding-bottom: 90rpx">
			<view class="rearchge_bg">
				<image class="coinbg" src="/static/owo/coinbg.png"></image>
				<view class="coincontent">
					<image class="icon" src="/static/owo/coin.png"></image>
					<text class="score">{{wallet.score}}欧我币</text>
				</view>
			</view>
			<view class="rearchagetxt">
				请选择充值金额
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in e.list" :key="item.price" @click="toprice(index)">
					<view class="top">
						<image class="coin" src="/static/owo/coin.png"></image>
						<text>{{item.price}}</text>
						<!-- <text v-if="item.benefit>0" class="label">赠送{{item.benefit}}动车票</text> -->
					</view>
					<view class="bottom">
						<text>¥{{item.price}}元</text>
					</view>
				</view>
			</view>
		</view>
		<view style="text-align: center" class="btn1" @click="addaddress">
			<view class="btntext fweight500 fsize36 black"></view>
		</view>
		<view class="empty-page" v-if="e.list.length==0">
			<view class="nofull">
				<image src="../../static/icons/package/nofull.png" class="nofullimg"></image>
				<text class="notitle">暂无数据</text>
			</view>
		</view>
		<van-dialog use-slot :show="payMethodDialogVisible" :show-confirm-button="false" width="312">
			<my-rearchage-method v-if="payMethodDialogVisible" v-on:close="payMethodDialogVisible = false"
				:price="paymentDetail.need" v-on:confirm="paymethod" @orderstate="startGetOrderState"
				@getono="getono" />
		</van-dialog>
	</view>
</template>

<script lang="ts" setup>
	import MyRearchageMethod from '@/wxcomponents/my-rearchage-method'
	import moment from 'moment'
	import { list } from "@/api/donglishang";
	import { ref, computed, reactive } from 'vue'
	import {
		loadWallet
	} from '@/api/user'
	import { onLoad, onShow, onPullDownRefresh, onUnload } from "@dcloudio/uni-app";
	import {
		preRechargeconfig,
		orderstate
	} from "@/api/pay";
	let e = reactive({
		list: []
	})
	let wallet = ref({
		balance: 0,
		score: 0,
		ticket: 0
	})
	let paymentDetail = ref({
		need: 0
	});
	let ono = ref("")
	let timer = ref(null)
	const paysuccessDialogVisible = ref(false);
	const payMethodDialogVisible = ref(false);
	onLoad(() => {
		getlist()
	})
	onShow(() => {
		// const token = uni.getStorageSync("token")
		// if (token) {
		// 	getloadWallet()
		// }
	})
	async function getloadWallet() {
		const token = uni.getStorageSync("token")
		let score = 0
		let ticket = 0
		if (token) {
			const res = await loadWallet()
			const data = res.data || {}
			score = data.score || 0
			ticket = data.ticket || 0
		}

		wallet.value = {
			balance: 0,
			score: score,
			ticket: ticket,
		}
	}
	function getono(onos) {
		ono.value = onos
	}
	function startGetOrderState() {
		const poll = async () => {
			const obj = {
				ono: ono.value
			}
			const res = await orderstate(obj)
			const data = res.data || {}
			if (data.state === 3) {
				clearInterval(timer.value)
				// 程序获取钱包
				payMethodDialogVisible.value = false
				uni.showToast({
					title: "充值成功"
				})
			}
		}

		timer.value = setInterval(poll, 500);
	}
	onUnload(() => {
		if (timer.value) {
			clearInterval(timer.value)
		}
	})
	function toprice(index) {
		paymentDetail.value.need = e.list[index]['price']
		payMethodDialogVisible.value = true
	}
	async function getlist() {
		const res = await preRechargeconfig();
		const data = res.data || {};
		const items = data.items || [];
		for (let i = 0; i < items.length; i++) {
			items[i]['price'] = (items[i]['price'] / 100).toFixed(0)
		}
		e.list = items
	}
</script>

<style lang="scss">
	@import "src/static/scss/common";
	.btn1 {
		width: 90%;
		position: fixed;
		left: 5%;
		bottom: 30rpx;
		z-index: 3;
	
		.btntext {
			width: 100%;
			max-height: 84rpx;
			color: #7A5E15;
			background-image: url("/static/owo/rearchage-confirm-btn.png");
			background-position: 0;
			background-repeat: no-repeat;
			background-size: cover;
		}
	}
	.rearchge_bg {
		width: 100%;
		height: 254rpx;
		position: relative;
		margin-bottom: 38rpx;

		.coinbg {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 0;
		}

		.coincontent {
			width: 100%;
			height: 100%;
			position: relative;
			z-index: 1;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;

			.icon {
				width: 80rpx;
				height: 80rpx;
			}

			.score {
				font-size: 36rpx;
				color: #ffffff;
				font-weight: bold;
			}
		}
	}

	.rearchagetxt {
		font-size: 32rpx;
		color: #ffffff;
		line-height: 80rpx;

	}

	.page-head {
		display: flex;
		gap: 10px;
		width: 100vw;
		line-height: 88px;
	}

	.package-box {
		padding: 20rpx;

		.list {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;

			.item {
				width: 32%;
				height: 160rpx;
				margin-right: 2%;
				background-color: #42424E;
				margin-bottom: 2%;
				flex-direction: column;
				display: flex;
				justify-content: center;

				.top {
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: center;
					position: relative;
					align-items: center;
					margin-bottom: 8rpx;
					.coin {
						width: 34rpx;
						height: 34rpx;
						margin-right: 4rpx;
					}
					text {
						color: #ffffff;
						font-size: 36rpx;
						z-index: 1;
						font-weight: bold;
					}

					// .label {
					// 	width: 164rpx;
					// 	height: 38rpx;
					// 	line-height: 38rpx;
					// 	color: #ffffff;
					// 	font-size: 20rpx;
					// }
				}

				.bottom {
					width: 100%;
					text-align: center;
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.65);
				}
			}

			.item:nth-child(3n+3) {
				margin-right: 0%;
			}
		}
	}
</style>